<template>
	<view>
	   <view class="index-item-body">
		<view class="index-item" v-for="(item, index) in itemList" :key="index" >
			<view class="item-content">
				<view class="item-header">
					<view class="idx-userinfo">
						<view class="idx-userheadimg">
							<image src="@/static/logo.png" alt="" style="height: 100%;"></image>
						</view>
						<view class="idx-usermessage">
							<view class="idx-username">
								<view class="username">
									<text>{{item.userinfo.username}}</text>
								</view>
								<view class="idx-userbadge">
									
								</view>
							</view>
							<view class="idx-userdesignation">
								<text>{{item.userinfo.headline}}</text>
							</view>
						</view>
					</view>
					<view class="focusBtn"><button size="mini">关注</button></view>
				</view>
				<view class="item-title" @click="getArticleContent(item.articleId)">
					<text>{{item.title}}</text>
				</view>
				<view class="item-message" @click="getArticleContent(item.articleId)">
					<view class="picture">
						<image src="@/static/images/landscape-g380da4308_1920.jpg" alt=""></image>
					</view>
<!-- 					<view class="video" v-if="item.ifVideo.type">
						<image :src="item.ifVideo.videoPictureUrl" alt=""></image>
						<view class="mask-layer"></view>
						<view class="playVideo" style="height: 120rpx; width: 120rpx;">
							<image src="../../static/images/play.png" alt="" style="height: 100%;"></image>
						</view>
						<view class="video-play-number">
							<text>播放量: {{item.ifVideo.videoPlayNumber}}</text>
						</view>
					</view> -->
				</view>
				<view class="item-footer">
					<view class="left">
						<view class="like-btn">
							<span class="lnr lnr-thumbs-up" style="margin-right: 10rpx;"></span>
							<text>{{item.voteUpCount}}</text>
						</view>
						<view class="dislike-btn">
							<span class="lnr lnr-thumbs-down" style="margin-right: 10rpx;"></span>
							<text>{{item.voteDownCount}}</text>
						</view>
					</view>
					<view class="right">
						<view class="message-number">
							<span class="lnr lnr-bubble" style="margin-right: 10rpx;"></span>
							<text>{{item.commentCount}}</text>
						</view>
						<view class="amount-of-forwarding">
							<span class="lnr lnr-rocket" style="margin-right: 10rpx;"></span>
							<text>{{item.followerCount}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	   </view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import { onReachBottom,onLoad} from '@dcloudio/uni-app';
	import userApi from '@/static/assets/js/userApi.js'
	const itemList = reactive([
		// {
		// 	headPortraitUrl:"../../static/test-img/xdd.jpg",
		// 	userName:"小呆呆",
		// 	userId:"",
		// 	userDesignation:"妄想拥有头衔",
		// 	title:"我是大烧鸡",
		// 	ifPictrue:{
		// 		type:false,
		// 		pictureUrl:"../../static/test-img/bg1.jpg",
		// 	},	
		// 	ifVideo:{
		// 		type:true,
		// 		videoPictureUrl:"../../static/test-img/bg1.jpg",
		// 		videoPlayNumber:1
		// 	},
		// 	ifLike:{
		// 		type:0,
		// 		likeNumber:666,
		// 		dislikeNumber:0
		// 	},
		// 	messageNumber:0,
		// 	forwardingNumber:1
		// },
		// {
		// 	headPortraitUrl:"../../static/test-img/xss.jpg",
		// 	userName:"大鲨鲨",
		// 	userDesignation:"据说是群主",
		// 	title:"鸽子咕咕咕",
		// 	ifPictrue:{
		// 		type:true,
		// 		pictureUrl:"../../static/test-img/bg2.jpg",
		// 	},
		// 	ifVideo:{
		// 		type:false,
		// 		videoPictureUrl:"",
		// 		videoPlayNumber:0
		// 	},
		// 	ifLike:{
		// 		type:0,
		// 		likeNumber:999,
		// 		dislikeNumber:0
		// 	},
		// 	messageNumber:0,
		// 	forwardingNumber:1
		// },
		// {
		// 	headPortraitUrl:"../../static/test-img/bqgg.jpg",
		// 	userName:"霸气哥哥",
		// 	userDesignation:"霸气",
		// 	title:"霸王色霸气",
		// 	ifPictrue:{
		// 		type:true,
		// 		pictureUrl:"../../static/test-img/bg3.jpg",
		// 	},
		// 	ifVideo:{
		// 		type:false,
		// 		videoPictureUrl:"",
		// 		videoPlayNumber:0
		// 	},
		// 	ifLike:{
		// 		type:0,
		// 		likeNumber:999,
		// 		dislikeNumber:0
		// 	},
		// 	messageNumber:0,
		// 	forwardingNumber:1
		// },
	])
	
	
	// const listItem ={
	// 	articleId: 45,
	// 	commentCount: 0,
	// 	followerCount: 0,
	// 	title: "0",
	// 	userinfo: {
	// 		userId: 2,
	// 		username: "13762398015",
	// 		avatar:'',
	// 		headline:''
	// 	},
	// 	voteDownCount: 0,
	// 	voteUpCount: 0
	// }
	// const newList = reactive([
		
	// ])
	
	const addItem = () =>{
		userApi.getArticle().then((resp)=>{
			// console.log(resp);
			// const josnObject = JSON.parse(resp);
			// console.log(josnObject);
			if(resp.length==5){
				for(let i=0;i<5;i++){
					// console.log(resp[i]);
					itemList.push(resp[i])
				}
			}
		})
		// console.log("被触发");
		// console.log(newList);
		// console.log(itemList);
	}
	
	const getArticleContent = (key) =>{
		userApi.getArticleInfo(key).then((resp)=>{
			console.log(resp);
			if(resp==""){
				// console.log("傻逼");
			}else{
				let josnString = JSON.stringify(resp)
				uni.navigateTo({
					url:"/pages/article/article?articleInfo="+encodeURIComponent(josnString) 
				})
			}
		})
	}
	
	onLoad(()=>{
		addItem()
	})

	
	onReachBottom(()=>{
		addItem()
	})
</script>

<style scoped>
	@import url("@/static/iconfonts/Linearicons/style.css");
	

.index-item-body{
	width:100% ;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: "LXGWWenKai-Regular";
}

.index-item{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50rpx;
	width: 90%;
	border-radius: 5rpx;
	/* border: 1px black solid; */
	box-shadow:  5px 5px 25px #d1d1d1,
             -5px -5px 25px #ffffff;
}

	
.item-content{
	width: 95%;
	padding: 20rpx 20rpx 20rpx 20rpx;
}

.item-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	width: 100%;
}

	
.idx-userheadimg{
	height: 80rpx;
	width: 80rpx;
	border-radius: 50%;
	margin-right: 15rpx;
	overflow: hidden;
}


uni-image{
	
	width: 100%;
}

.idx-userinfo{
	display: flex;
	justify-content: center;
	align-items: center;
}

	
.username{
	font-weight: 600;
}

	
.idx-userdesignation{
	color: rgb(133, 133, 133);
	font-size: 10rpx;
}



.item-title{
	font-size: large;
	font-weight: 600;
	margin-bottom: 15rpx;
}

.item-message{
	width: 100%;
	border-radius: 10rpx 10prx 10rpx 10rpx;
	overflow: hidden;
}


.item-message>.picture>img{
	width: 100%;
}


.item-message>.video>img{
	width: 100%;
}

.item-message>.video>.mask-layer{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.3);
}

.item-message>.video>.video-play-number{
	position: absolute;
	right: 0;
	bottom: 5rpx;
	color: rgba(224, 224, 224,0.5);
	/* width: 18%; */
	border-radius: 10rpx;
	text-align: center;
	font-size: 15rpx;
	background-color: rgba(0,0,0,0.5);
}

.item-message>.video>.video-play-number>text{
	padding: 15rpx 15rpx 15rpx 15rpx;
}

.item-message>.video{
	position: relative;
}
.item-message>.video>.playVideo{
	position: absolute;
	width: 20%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	/* background-color: rgb(0,0,0); */
}

.item-message>.video>.playVideo>img{
	width: 100%;
}
.item-footer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15rpx;
}

.item-footer>.left{
	display: flex;
	justify-content: space-between;
	color: rgb(90,90,90);
}

.item-footer>.left>.like-btn{
	margin-right: 20rpx;
}

.item-footer>.right{
	display: flex;
	justify-content: space-between;
	color: rgb(90,90,90);
}

.item-footer>.right>.message-number{
	margin-right: 20rpx;
}
</style>